<template>
  <demo-block>
    <!-- 基础用法 -->
    <vcu-cell center :title="t.basicUsage">
      <template #value>
        <vcu-number v-model="number1" />
      </template>
    </vcu-cell>
    <!-- 步长设置 -->
    <vcu-cell center :title="t.step">
      <template #value>
        <vcu-number v-model="number2" step="2" />
      </template>
    </vcu-cell>
    <!-- 限制输入范围 -->
    <vcu-cell center :title="t.range">
      <template #value>
        <vcu-number v-model="number3" :min="5" :max="8" />
      </template>
    </vcu-cell>
    <!-- 限制输入整数 -->
    <vcu-cell center :title="t.integer">
      <template #value>
        <vcu-number v-model="number4" integer />
      </template>
    </vcu-cell>
    <!-- 禁用状态 -->
    <vcu-cell center :title="t.disabled">
      <template #value>
        <vcu-number v-model="number5" disabled />
      </template>
    </vcu-cell>
    <!-- 禁用输入框 -->
    <vcu-cell center :title="t.disableInput">
      <template #value>
        <vcu-number v-model="disabledInput" disable-input />
      </template>
    </vcu-cell>
    <!-- 固定小数位数 -->
    <vcu-cell center :title="t.decimalLength">
      <template #value>
        <vcu-number v-model="number8" :decimal-length="1" step="0.2" />
      </template>
    </vcu-cell>
    <!-- 自定义大小 -->
    <vcu-cell center :title="t.customSize">
      <template #value>
        <vcu-number v-model="number7" button-size="32px" input-width="40px" />
      </template>
    </vcu-cell>
    <!-- 异步变更 -->
    <vcu-cell center :title="t.beforeChange">
      <template #value>
        <vcu-number v-model="number6" :before-change="beforeChange" />
      </template>
    </vcu-cell>
    <!-- 圆角风格 -->
    <vcu-cell center :title="t.roundTheme">
      <template #value>
        <vcu-number
          v-model="numberRound"
          theme="round"
          button-size="22"
          disable-input
        />
      </template>
    </vcu-cell>
  </demo-block>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { Toast } from '../../../components';
const t = {
  basicUsage: "基础用法",
  step: "步长设置",
  range: "限制输入范围",
  integer: "限制输入整数",
  roundTheme: "圆角风格",
  customSize: "自定义大小",
  beforeChange: "异步变更",
  disableInput: "禁用输入框",
  decimalLength: "固定小数位数",
  disabled: "禁用状态"
};

const number1 = ref(1);
const number2 = ref(1);
const number3 = ref(1);
const number4 = ref(1);
const number5 = ref(1);
const number6 = ref(1);
const number7 = ref(1);
const number8 = ref(1);
const numberRound = ref(1);
const disabledInput = ref(1);

const beforeChange = () => {
  Toast.loading({ forbidClick: true });

  return new Promise((resolve) => {
    setTimeout(() => {
      Toast.clear();
      resolve(true);
    }, 500);
  });
};
</script>
